<template>
  <!-- 头部导航 -->
  <div class="headNav">
    <van-nav-bar left-arrow>
      <template #right>
        <van-icon
          name="ellipsis"
          color="#000"
          size="25px"
          @click="showShare = true"
        />
      </template>

      <template #left>
        <van-icon
          name="arrow-left"
          color="#000"
          size="25px"
          @click="$router.go(-1)"
        />
      </template>

      <template #title>
        <van-tabbar
          v-model="active"
          active-color="#ee0a24"
          inactive-color="#000"
          class="headBoxTitle"
          inactiveColor="#252525"
        >
          <van-tabbar-item
            ><van-icon
              name="location"
              color="rgb(238, 10, 36)"
              size="15px"
              v-show="active === 0"
            /><span @click="det1">商品</span></van-tabbar-item
          >
          <van-tabbar-item
            ><van-icon
              name="location"
              color="rgb(238, 10, 36)"
              size="15px"
              v-show="active === 1"
            /><span @click="det2">商品详情</span></van-tabbar-item
          >
          <van-tabbar-item
            ><van-icon
              name="location"
              color="rgb(238, 10, 36)"
              size="15px"
              v-show="active === 2"
            /><span @click="det3">商品推荐</span></van-tabbar-item
          >
        </van-tabbar>
      </template>
    </van-nav-bar>
    <share-page :showShare="showShare"></share-page>
  </div>
</template>

<script>
// 分享面板
import sharePage from "../common/sharePage.vue";
export default {
  data() {
    return {
      active: 0,
      showShare: false, // 分享面板显示
    };
  },
  components: {
    sharePage,
  },
  methods: {
    // 导航栏切换
    det1() {
      this.active = 0;
      document.documentElement.scrollTop = 0;
    },
    det2() {
      this.active = 1;
      document.documentElement.scrollTop = this.$store.state.goodsDet;
    },
    det3() {
      this.active = 2;
      document.documentElement.scrollTop = 0;
    },
    // 分享面板显示
    isShow() {
      this.showShare = false;
    },
  },
  beforeMount() {
    document.documentElement.scrollTop = 0;
  },
};
</script>

<style lang="scss" scoped>
.headNav {
  position: fixed;
  width: 100%;
  border-bottom: 1px solid #dcdcdc;
  background-color: #fff;
  z-index: 50;

  .headBoxTitle {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 46px;

    span {
      font-size: 15px;
      margin-left: 3px;
    }
  }
}
</style>
